<template>
    <div class="setting-record">

        <el-form ref="form" :model="form" :rules="rules" label-width="120px" size="small">
            <!-- 备案信息 -->
            <div class="ls-card m-t-16">
                <div class="card-title">备案信息</div>
                <div class="card-content m-t-24">
                    <el-form-item label="版权信息">
                        <el-input class="ls-input" v-model="form.copyright" show-word-limit />
                        <div class="muted xs">例如填写，Copyright © 2019-2020 公司名称</div>
                    </el-form-item>
                    <el-form-item label="备案号">
                        <el-input class="ls-input" v-model="form.record_no" show-word-limit />
                    </el-form-item>
                    <el-form-item label="备案号链接" prop="record_url">
                        <el-input class="ls-input" v-model="form.record_url" show-word-limit />
                        <div class="muted xs">例如填写域名信息备案系统链接，http://beian.miit.gov.cn</div>
                    </el-form-item>
                </div>
            </div>
        </el-form>

        <!--  表单功能键  -->
        <div class="bg-white ls-fixed-footer">
            <div class="row-center flex" style="height: 100%">
                <el-button size="small" type="primary" @click="onSubmitFrom('form')">保存</el-button>
            </div>
        </div>
    </div>
</template>


<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import { apiRecordConfig, apiRecordConfigEdit } from "@/api/setting";

@Component
export default class SettingRecord extends Vue {
    /** S Data **/
    // 表单数据
    form: any = {
        copyright: "", // 版权信息
        record_no: "", // 备案号
        record_url: "", // 备案号链接
    };

    // 表单验证
    rules: object = {
        record_url: [
            {
                pattern:
                    /[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?/,
                message: "请输入合法链接",
                trigger: "blur",
            },
        ],
    };
    /** E Data **/

    /** S Methods **/
    // 初始化表单数据
    async initFormData(): Promise<void> {
        const res: any = await apiRecordConfig()
        for (const key in res) {
            this.form[key] = res[key];
        }
    }

    // 重置表单数据
    onResetFrom() {
        this.initFormData();
        this.$message.info("已重置数据");
    }

    // 提交表单
    onSubmitFrom(formName: string) {
        const refs = this.$refs[formName] as HTMLFormElement;

        refs.validate(async (valid: boolean): Promise<void> => {
            if (!valid) return;
            const loading = this.$loading({ text: "保存中" });

            await apiRecordConfigEdit({
                ...this.form,
            }).finally(() => {
                loading.close();
            });
            this.$store.dispatch("getConfig");
        });
    }
    /** E Methods **/

    /** S Life Cycle **/
    created() {
        this.initFormData();
    }
    /** E Life Cycle **/
}
</script>


<style lang="scss" scoped>
.setting-record {
    padding-bottom: 60px;
}

.ls-card {
    .ls-input {
        width: 280px;
    }

    .card-title {
        font-size: 14px;
        font-weight: 500;
    }
}
</style>